<template>
  <div>
    <nav-list></nav-list>
    <div class="service">
      <div class="subtitle"><span>{{ $t('navbar.service') }}</span></div>
      <div class="service-content">
  <!--       <div class="service-item">
          <h5>{{ $t('service.advisory') }}</h5>
          <p>{{ $t('service.advisoryZero') }}</p>
          <p>{{ $t('service.advisoryOne') }}</p>
          <p>{{ $t('service.advisoryTwo') }}</p>
          <p>{{ $t('service.advisoryThree') }}</p>
        </div>
        <div class="service-item">
          <h5>{{ $t('service.onSite') }}</h5>
          <p>{{ $t('service.onSiteOne') }}</p>
          <p>{{ $t('service.onSiteTwo') }}</p>
          <p>{{ $t('service.onSiteThree') }}</p>
          <p>{{ $t('service.onSiteFour') }}。</p>
        </div> -->
        <div class="service-item">
          <!-- 【{{ $t('service.sample') }}】 -->
          <a href="javascript:void(0)"><h5>【{{ $t('service.sample') }}】</h5></a>
          <a href="http://www.zjhzzdh.cn/static/images/电动执行机构.pdf" download="电动执行机构" style="padding-left: 20px;font-weight: bold;">电动执行机构样本.pdf</a>
        </div>
        <!-- <iframe src="http://www.zjhzzdh.cn/static/images/电动执行.pdf" width="880" height="600" style="margin-left: -20px;"></iframe> -->
        <div class="service-item">
          <h5>【{{ $t('service.patent') }}】</h5>
          <div class="patent">
            <img src="~IMGS/patent-1.jpg" alt="">
            <img src="~IMGS/patent-2.jpg" alt="">
            <img src="~IMGS/patent-3.png" alt="" style="width:210px;height: 270px;">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navList from 'COMPS/nav-list.vue'
 export default {
  name: 'service',
  components: {
    navList
  },
 }
</script>

<style lang="less">
  @import '~COMMON/common.less';
  
  .service {
    width: 880px;
    display: inline-block;
    .service-content {
      padding-left: 20px;
      .service-item {
        h5 {
          font-size: 16px;
          line-height: 45px;
          color: #006d60;
        }
        >p {
          font-size: 14px;
          line-height: 30px;
          color: #666;
        }
        .patent {
          >img {
            width: 230px;
            height: 300px;
            .On-xs({
              width: 160px;
              height: 245px;
            });
          }
        }
      }
      .On-xs({
        padding: 0px;
      });
    }
  }
</style>